<script lang="ts" setup>
import { ref, onUnmounted } from 'vue'

const title = '404 NOT FOUND'
let index = 0
const typed = ref<string>('')

const setTime = setInterval(() => {
  index = (index + 1) % (title.length + 20)
  typed.value = title.substring(0, index)
}, 80)

onUnmounted(() => {
  clearInterval(setTime)
})
</script>

<template>
  <div class="container">
    <h1 class="title">🌏{{ typed }}</h1>
    <p class="text-xl">{{ $t('404.tip') }}</p>
  </div>
</template>

<style scoped>
.title {
  @apply text-4xl pr-1 font-bold  border-r-2;
  @apply border-dark-600 dark:border-gray-500;

  animation: type 400ms infinite;
}

@keyframes type {
  from {
    border-right-width: 0;
  }

  to {
    border-right-width: 0.15em;
  }
}

.container {
  @apply px-8 p-2 max-h-full min-h-full rounded-tl-xl;
  @apply flex flex-col justify-center items-center;
  @apply bg-gray-300 dark:(bg-dark-900 text-light-50);
}

@media (max-width: 768px) {
  .container {
    @apply rounded-none;
  }
}
</style>
